<template>
  <div class="" :style="{height: $store.state.height + 'px'}" style="width: 100%;position: relative;">
    <div id="arcgis-map" :style="{height: $store.state.height + 'px', width: '100%'}"></div>
  </div>
</template>

<script>
import 'ol/ol.css'

import Map from 'ol/Map'
import View from 'ol/View'

import { Tile as TileLayer, Image as ImageLayer } from 'ol/layer'
import { OSM, ImageArcGISRest } from 'ol/source'

import { transform } from 'ol/proj'
import TileGrid from 'ol/tilegrid/TileGrid'
import TileImage from 'ol/source/TileImage'

import XYZSource from 'ol/source/XYZ'
const url = 'http://10.1.3.42:6080/arcgis/rest/services/testserver/MapServer'
// const url = 'http://10.1.3.42:6080/arcgis/rest/services/test/MapServer'
// const url = 'http://10.1.3.42:6080/arcgis/rest/services/SampleWorldCities/MapServer'
// const url = 'http://10.1.3.42:6080/arcgis/rest/services/YanTa20180601/MapServer'
// const url = 'http://10.1.3.42:6080/arcgis/rest/services/YanTaNewMap/MapServer'
// const url = 'http://10.1.3.42:6080/arcgis/rest/services/YT/MapServer'
// const url = 'http://10.1.3.42:6080/arcgis/rest/services/YTNew/MapServer'
// http://10.1.3.42:6080/arcgis/rest/services/test/MapServer/export
// ?dpi=96
// &transparent=true
// &format=png8
// &bbox=36601388.93628513%2C3824845.3425985104%2C36601652.6371794%2C3825020.4445651514
// &bboxSR=2360
// &imageSR=2360
// &size=1384%2C919
// &f=image

var gaodeMapLayer = new TileLayer({
  source: new XYZSource({
    url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
  })
})

var resolutions = []
var maxZoom = 18

// 计算百度使用的分辨率
for (var i = 0; i <= maxZoom; i++) {
  resolutions[i] = Math.pow(2, maxZoom - i)
}
var tilegrid = new TileGrid({
  origin: [0, 0], // 设置原点坐标
  resolutions: resolutions // 设置分辨率
});

// 创建百度地图的数据源
var baiduSource = new TileImage({
  projection: 'EPSG:3857',
  tileGrid: tilegrid,
  tileUrlFunction: function(tileCoord, pixelRatio, proj) {
    var z = tileCoord[0]
    var x = tileCoord[1]
    var y = tileCoord[2]

    // 百度瓦片服务url将负数使用M前缀来标识
    if (x < 0) {
      x = 'M' + (-x)
    }
    if (y < 0) {
      y = 'M' + (-y)
    }
    // http://online3.map.bdimg.com/onlinelabel/?qt=tile&x="+x+"&y="+y+"&z="+z+"&styles=pl&udt=20151021&scaler=1&p=1
    return `http://online0.map.bdimg.com/onlinelabel/?qt=tile&x=${x}&y=${y}&z=${z}&styles=pl&udt=20160426&scaler=1&p=1`
  }
});

const layers = [
  // gaodeMapLayer,
  new TileLayer({
    source: new OSM()
    // source: baiduSource

  }),
  new ImageLayer({
    source: new ImageArcGISRest({
      ratio: 1,
      params: {},
      url: url
    })
  })
]

export default {
  name: "olarcgis",
  title: "加载Arcgis",
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.map = new Map({
      target: 'arcgis-map',
      layers: layers,
      view: new View({
        center: [106.51, 29.55],
        projection: 'EPSG:4326',
        // center: [12150000, 4100000],
        // center:  [12959773,4853101],
        // center: transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857'),
        zoom: 5
      })
    })
  }
}
</script>

<style lang="less">
</style>
